<template>
  <div>
    <Card class="">
      <ul class="tableNav marginB20" v-show="!$app.judgeData(orderInfo)">
        <li class="tran3" :class=" whoShow==1 &&' active'" @click="poWY(1)">智能推荐</li>
        <li class="tran3" :class=" whoShow==2 &&' active'" @click="poWY(2)">自助选择</li>
      </ul>
      <div class=" paddingLi f_16 marginB20" style="background-color:#f3f3f3;">
        <Icon type="md-warning relative cRed marginR10" style="top:-2px;" size="24" />
        需要保护的商品/服务项目 (每一类别为{{allK}}元，包含10个小分类，超出10个，每个{{item_fee}}元)
      </div>
      
      <!-- 99隐藏不给你编辑 -->
      <template v-if="whoShow!=99">
        <Z1 ref="Z1" :whoShow="whoShow"/>
        <Z2 ref="Z2" :whoShow="whoShow" :orderInfo="orderInfo"/>
      </template>
      <template v-else>
        <Z3 ref="Z3" :whoShow="whoShow" :cglist="orderInfo.cg_list"/>
      </template>
      
      
    </Card>
  </div>
</template>


<script>
import Z1 from "./z1";//智能选择
import Z2 from "./z2";//自助选择
import Z3 from "./z3";//纯粹看
export default {
  name: "b3",
  components: {Z1,Z2,Z3},
  props:['orderInfo'],//编辑订单时传过来的商标数据
  data() {
    let {
      tm_register:{
        base_official_fee,
        base_service_fee,
        item_fee
      }
    }=$app.getSession('bigSetting');

    let data = {
      allK:parseFloat(base_official_fee)+parseFloat(base_service_fee),
      item_fee:parseFloat(item_fee)
    };

    let tool = {
      whoShow:1//1智能推荐,2自助选择,99隐藏不给你编辑
    };
    return Object.assign(data, tool);
  },

  watch:{
    orderInfo(newVal,oldVal){
      this.orderInfo = newVal;
      if($app.judgeData(newVal)){
        if(newVal.state==5 || newVal.state==10 || newVal.state==2 ){//补正
          this.whoShow=99;
        }else{//修改订单
          this.whoShow=2;
        }
      }else{
        this.whoShow=1;
      }
    }
  },
  mounted() {
    let { 
      type
    } = this;
    
  },
  methods: {
    //选项卡切换
    poWY(i){
      this.whoShow=i;
    }
   
  }
};
</script>

